<template>
  <div class="app-container">

    <el-row>
      <el-col :span="24" class="card-box">
        <el-card>
          <div style="height: 30px">
            <el-form :model="queryParams" ref="queryForm" :inline="true" v-show=true label-width="68px">
              <el-form-item label="统计时间">
                <el-date-picker
                  v-model="dateRange"
                  size="small"
                  style="width: 240px"
                  value-format="yyyy-MM-dd"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
              </el-form-item>
            </el-form>
          </div>

        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" class="card-box">
        <el-card>
          <el-row>
            <el-col :span="6" class="order_card-box" >
              <el-card>
                <div class="el-table el-table--enable-row-hover el-table--medium " style="height: 100px">
                  <el-row>
                    <el-col span="12" align="center" >
                      <img v-if="orderimage" :src="orderimage" class="sidebar-logo" />
                    </el-col>
                    <el-col span="12" class="card-box" >
                      <div align="center">
                        <h1 >{{orderTotal}}</h1>
                        <h4>订单数量(笔)</h4>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </el-card>
            </el-col>

            <el-col :span="6" class="order_card-box" >
              <el-card>
                <div class="el-table el-table--enable-row-hover el-table--medium " style="height: 100px">
                  <el-row>
                    <el-col span="12" align="center" >
                      <img v-if="moneyimage" :src="moneyimage" class="sidebar-logo" />
                    </el-col>
                    <el-col span="12" class="card-box" >
                      <div align="center">
                        <h1 >16</h1>
                        <h4>产品数量(种类)</h4>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </el-card>
            </el-col>

            <el-col :span="6" class="order_card-box" >
              <el-card>
                <div class="el-table el-table--enable-row-hover el-table--medium " style="height: 100px">
                  <el-row>
                    <el-col span="12" align="center" >
                      <img v-if="money1image" :src="money1image" class="sidebar-logo" />
                    </el-col>
                    <el-col span="12" class="card-box" >
                      <div align="center">
                        <h1 >{{completeQuantity}}</h1>
                        <h4>交货数量(件)</h4>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </el-card>
            </el-col>

            <el-col :span="6" class="order_card-box" >
              <el-card>
                <div class="el-table el-table--enable-row-hover el-table--medium " style="height: 100px">
                  <el-row>
                    <el-col span="12" align="center" >
                      <img v-if="percentageimage" :src="percentageimage" class="sidebar-logo" />
                    </el-col>
                    <el-col span="12" class="card-box" >
                      <div align="center">
                        <h1 >{{completeRate}}</h1>
                        <h4>完成率</h4>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>


    <el-row>
      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header">
            <div style="height: 30px">
              <el-form :model="queryParams" ref="queryForm" :inline="true" v-show=true label-width="68px">
                <el-form-item>
                  <span style="display:inline-block;width:200px; font-weight: bold;font-size: large">销量统计</span>
                </el-form-item>
              </el-form>
            </div>
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="zxbar" style="height: 420px" />
          </div>
        </el-card>
      </el-col>

<!--      <el-col :span="12" class="card-box">-->
<!--        <el-card>-->
<!--          <div slot="header">-->
<!--            <div style="height: 30px">-->
<!--              <el-form :model="queryParams" ref="queryForm" :inline="true" v-show=true label-width="68px">-->
<!--                <el-form-item>-->
<!--                  <span style="display:inline-block;width:200px; font-weight: bold;font-size: large">采购统计</span>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="统计时间" >-->
<!--                  <el-date-picker-->
<!--                    v-model="dateRange"-->
<!--                    size="small"-->
<!--                    style="width: 240px"-->
<!--                    value-format="yyyy-MM-dd"-->
<!--                    type="daterange"-->
<!--                    range-separator="-"-->
<!--                    start-placeholder="开始日期"-->
<!--                    end-placeholder="结束日期"-->
<!--                  ></el-date-picker>-->
<!--                </el-form-item>-->
<!--                <el-form-item>-->
<!--                  <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>-->
<!--                  <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>-->
<!--                </el-form-item>-->
<!--              </el-form>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="el-table el-table&#45;&#45;enable-row-hover el-table&#45;&#45;medium">-->
<!--            <div ref="zxpie" style="height: 420px"/>-->
<!--          </div>-->
<!--        </el-card>-->
<!--      </el-col>-->
    </el-row>


    <el-row>
      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header">
            <div style="height: 30px">
              <el-form :model="queryParams" ref="queryForm" :inline="true" v-show=true label-width="68px">
                <el-form-item>
                  <span style="display:inline-block;width:200px; font-weight: bold;font-size: large">订单交货趋势</span>
                </el-form-item>
              </el-form>
            </div>
          </div>
          <div :style="{height:height,width:width}">
            <div ref="salseordertrend" style="height: 550px"/>
          </div>
        </el-card>
      </el-col>

      <!--      <el-col :span="12" class="card-box">-->
      <!--        <el-card>-->
      <!--          <div slot="header"><span>质量损失分析</span></div>-->
      <!--          <div style="height: 30px">-->

      <!--          </div>-->

      <!--        </el-card>-->
      <!--      </el-col>-->
    </el-row>

  </div>


</template>

<script>

import orderImg from "@/assets_cme/images/order.png";
import moneyimage from "@/assets_cme/images/money.png";
import money1image from "@/assets_cme/images/money1.png";
import percentageimage from "@/assets_cme/images/percentage.gif";
import {barlist,ordertrend,orderStatisticsBytime} from "@/api/cmecomon/echarts";
import {cmenotic} from "@/api/cmecomon/homepage"
import echarts from "echarts";
require('echarts/theme/macarons') // echarts theme



export default {
  // components: {bar,pie},
  name: "orderchart",
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '300px'
  },

  data(){
    return{

      //图片资源
      orderimage: orderImg,
      moneyimage: moneyimage,
      money1image: money1image,
      percentageimage: percentageimage,
      //图表
      zxbar: null,
      zxpie: null,
      salseorderbar: null,
      // date: ['Date', '2012', '2013', '2014', '2015', '2016', '2017'],
      dates: null,
      ordertrendmetals: null,
      ordertrendnometals: null,
      ordertrendlasercladding: null,
      //  订单总量
      orderTotal: 0,
      //  交货数量
      completeQuantity: 0,
      //  完成率
      completeRate: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userName: undefined,
        phonenumber: undefined,
        status: undefined,
        deptId: undefined,
        beginTime: 0,
        endTime: 0
      },

      // 日期范围
      dateRange: [],

      //  通知
      cmenotic: "暂无通知",
      //通知标题
      cmenoticTitle: "CME后台管理系统通知"

    };
  },

  created(){
    this.getlist();
  },

  mounted() {
    this.$nextTick(() => {
      this.initsalseordertrend();
      this.initialOrderStatisticsBytime();
    })
  },

  methods: {
    //获取初始数据
    getlist(){
      var date = new Date();
      this.queryParams.beginTime =date.getFullYear() + "-" + date.getMonth() + "-" + date.getDate();
      this.queryParams.endTime = date.getFullYear() + "-" + date.getMonth() + "-" + date.getDate();

      barlist(this.addDateRange(this.queryParams, this.dateRange)).then(response => {

        //绘制柱状图
        this.zxbar = echarts.init(this.$refs.zxbar, "macarons");

        this.zxbar.setOption({
          title: {
            // text: '销量统计',
            left: 'center',
            top: 20,
            textStyle: {
              color: '#555555'
            }
          },
          tooltip: {

          },
          xAxis: {
            // data: this.datanames
            data: response.names
          },
          yAxis: {},
          series: [{
            name: '销量',
            type: 'bar',
            data: response.values
          }]
        })
        //绘制饼状图
        this.zxpie = echarts.init(this.$refs.zxpie, "macarons");
        this.zxpie.setOption({
          title: {
            text: '3D打印类型统计',
            subtext: 'Fake Data',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              // name: 'Access From',
              type: 'pie',
              radius: '50%',
              data: [
                //value:该类型的数值、itemStyle：样式设置color为颜色设置、name：类型名称
                { value: 1048, itemStyle: {color: "#3fb1e3"}, name: '金属打印' },
                { value: 735, itemStyle: {color: "#c4ebad"},name: '非金属打印' },
                { value: 580, itemStyle: {color: "#6be6c1"},name: '激光熔覆' },
                // { value: 484, name: 'Union Ads' },
                // { value: 300, name: 'Video Ads' }
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        })
      });

      cmenotic(this.queryParams).then(respnse =>{
        this.cmenotic = respnse[0].noticeContent;
        this.cmenoticTitle = respnse[0].noticeTitle;
      })


    },

    //绘制订单趋势折线图
    initsalseordertrend() {
      var salseordertrend = echarts.init(this.$refs.salseordertrend, "macarons");

      ordertrend(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
        this.dates = response.dates;
        this.ordertrendmetals = response.metal;
        this.ordertrendnometals = response.nometal;
        this.ordertrendlasercladding =response.lasercladding;

        setTimeout(()=>{
          salseordertrend.setOption( {
            legend: {},
            tooltip: {
              trigger: 'axis',
              showContent: false
            },
            dataset: {
              source: [
                this.dates,
                // ['金属打印', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
                // ['非金属打印', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
                // ['激光熔覆', 25.2, 37.1, 41.2, 18, 33.9, 49.1]
                this.ordertrendmetals,
                this.ordertrendnometals,
                this.ordertrendlasercladding
              ]
            },
            xAxis: {type: 'category'},
            yAxis: {gridIndex: 0},
            grid: {top: '55%'},
            series: [
              {
                type: 'line',
                smooth: true,
                seriesLayoutBy: 'row',
                emphasis: {focus: 'series'}
              },
              {
                type: 'line',
                smooth: true,
                seriesLayoutBy: 'row',
                emphasis: {focus: 'series'}
              },
              {
                type: 'line',
                smooth: true,
                seriesLayoutBy: 'row',
                emphasis: {focus: 'series'}
              },
              {
                type: 'pie',
                id: 'pie',
                radius: '30%',
                center: ['50%', '25%'],
                emphasis: {
                  focus: 'self'
                },
                label: {
                  formatter: '{b}: {@[' + this.dates[1] + ']} ({d}%)'
                },
                encode: {
                  itemName: this.dates[0],
                  value: this.dates[1],
                  tooltip: this.dates[1]
                }
              }
            ]
          });
          salseordertrend.on('updateAxisPointer', function (event) {
            const xAxisInfo = event.axesInfo[0];
            if (xAxisInfo) {
              const dimension = xAxisInfo.value + 1;
              salseordertrend.setOption({
                series: {
                  id: 'pie',
                  label: {
                    formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                  },
                  encode: {
                    value: dimension,
                    tooltip: dimension
                  }
                }
              });
            }
          });
        });
      })

    },

    //根据时间获取订单总量、交货量、完成率
    initialOrderStatisticsBytime(){
      orderStatisticsBytime(this.addDateRange(this.queryParams, this.dateRange)).then(responce => {
        this.orderTotal = responce.orderTotal;
        this.completeRate  =responce.completeRate;
        this.completeQuantity = responce.completeQuantity;
      })
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.getlist();
      this.queryParams.pageNum = 1;
      this.queryParams.beginTime =this.dateRange[0];
      this.queryParams.endTime = this.dateRange[1];
      this.initsalseordertrend();
      this.initialOrderStatisticsBytime();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
  },
}
</script>

<style scoped>


.sidebar-logo {
  width: 80px;
  height: 80px;
  vertical-align: middle;
  margin-right: 12px;
}

</style>
